{extend name="common/base"/}
{block name="style"}
  <style>
	.layui-tree-set .layui-tree-txt.on,.layui-tree-set .layui-tree-txt.on:hover{font-weight:800; color:#1E9FFF}
	.layui-tree-txt{display:inline-block; width:150px; overflow:hidden;}
	.layui-tree-iconClick{margin-right:3px;}
	.tree-left{width:286px; float:left; height:calc(100% - 24px); overflow-y: scroll; overflow-x: hidden; border:1px solid #eee; background-color:#FAFAFA; padding:12px 6px 12px 2px;}
	.tree-left h3{font-size:16px; height:30px; padding-left:10px; font-weight:800}
	.editormd-code-toolbar select{display:inline;}
	.editormd{margin-bottom:0}
	.editormd li{list-style: inherit;}
  </style>
{/block}
<!-- 主体 -->
{block name="body"}
<div class="p-3" style="height:calc(100% - 24px)">
	<div class="tree-left">
		<h3>知识库目录</h3>
		<div id="tree"></div>
	</div>
	<div class="body-table" style="margin-left:310px; margin-bottom:0">
		<form class="layui-form">
			<table class="layui-table" style="margin-bottom:0;">
			  <tr>
				<td class="layui-td-gray">标题 <font>*</font></td>
				<td><input type="text" value="{$detail.title}" name="title" lay-verify="required" lay-reqText="请输入标题" autocomplete="off" placeholder="请输入标题" class="layui-input"></td>
				<td class="layui-td-gray">排序<font>*</font></td>
				<td style="width:80px; text-align:center"><input type="text" name="sort" value="{$detail.sort}" placeholder="请输入排序，数字" autocomplete="off" class="layui-input"></td>
				<td class="layui-td-gray">类型</td>
				<td>
					{eq name="$detail.type" value="1"}文档{/eq}
					{eq name="$detail.type" value="2"}分组{/eq}
					{eq name="$detail.type" value="3"}链接{/eq}
				</td>
				</tr>
				{eq name="$detail.type" value="3"}
				<tr>
					<td class="layui-td-gray">跳转链接 <font>*</font></td>
					<td colspan="5">
						<input type="text" value="{$detail.link}" name="link" lay-verify="required" lay-reqText="请输入标题" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</td>
				</tr>
				{/eq}
			</table>
			{eq name="$detail.type" value="1"}
				{eq name="$editor" value="1"}
				<div style="margin-top:-2px;">
					<textarea placeholder="请输入内容" class="layui-textarea" id="container">{$detail.content}</textarea>
				</div>
				{else/}
					<div style="margin-top:-2px; margin-right:2px">
						<textarea id="mdContent" style="display:none;">{$detail.md_content|raw}</textarea>
						<div id="docContent"></div>
					</div>
				{/eq}
			{/eq}
			<div style="padding: 10px 0">
				<input type="hidden" name="id" value="{$id}">
				<button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">提交保存</button>
				<button lay-event="back" class="layui-btn layui-btn-primary">返回目录</button>
			</div>
		</form>
	</div>
</div>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
var doc_id = '{$detail.id}';
var book_id = '{$detail.book_id}';
const type = '{$detail.type}';
const editorType = '{$editor}';
var moduleInit;
if (editorType == 1) {
	moduleInit = ['tool','tinymce'];
}
else {
	moduleInit = ['tool','editormd'];
}
	function gouguInit() {
    var form = layui.form,tree = layui.tree,tool = layui.tool;
	
	$.ajax({
		url:"{:url('admin/book/doc_tree')}",
		data:{id:book_id},
		type:'get',
		success:function(res){					
			//仅节点左侧图标控制收缩
			var book = tree.render({
				elem: '#tree',
				data: res.trees,
				spread: true,
				id: 'book',
				edit: ['add', 'del'], //操作节点的图标
				onlyIconControl: true,  //是否仅允许节点左侧图标控制展开收缩
				click: function(obj){
					//layer.msg(JSON.stringify(obj.data));
					window.location.href='/admin/book/doc_add?id='+obj.data.id;
				},
				operate: function(obj){
					let type = obj.type; //得到操作类型：add、edit、del
					let data = obj.data; //得到当前节点的数据
					let elem = obj.elem; //得到当前节点元素					
					if(type === 'add'){ //增加节点
					  add(obj.data.id);
					} else if(type === 'update'){ //修改节点
					 // console.log(elem.find('.layui-tree-txt').html()); //得到修改后的内容
					} else if(type === 'del'){ //删除节点
						let callback = function (e) {
							layer.msg(e.msg);
							setTimeout(function(){							
								$('#tree').find('.layui-tree-txt').eq(0).click();
							},1000)	
						}
						tool.delete("/admin/book/doc_delete", {id:obj.data.id}, callback); 
					};
				}
			});	
			setTimeout(function(){
				$('[data-id="'+doc_id+'"]').find('.layui-tree-txt').eq(0).addClass('on');
			},100)
			
		}
	})
	
	//添加
	var selectTable=null;
	function add(pid) {
		var type=[{'id':1,'title':'新建文档'},{'id':2,'title':'新建分组'},{'id':3,'title':'新建链接'}];
		layer.open({
			title:'选择类型',
			type:1,
			area:['360px','320px'],
			content:'<div style="width:320px; padding:5px 15px"><div id="selectType"></div></div>',
			success:function(){
				selectTable=table.render({
					elem: '#selectType',
					cols: [[ //标题栏
						{type:'radio',title: '选择'},
						{field: 'title', title: '课程类型'}
					]],
					data: type
				  });			
			},
			btn:['确定'],
			btnAlign:'c',
			yes: function(idx){
				var checkStatus = table.checkStatus(selectTable.config.id);
				var data = checkStatus.data;
				if(data.length>0){
					if(data[0].id==1 || data[0].id==2){
						layer.prompt({title: '标题', formType: 3,value :''}, function(text, index){
							if(text == ''){
								layer.msg('输入标题');
								return false;
							}
							let callback = function (e) {
								layer.closeAll();
								layer.msg(e.msg);
								if(e.code==0){
									setTimeout(function(){							
										window.location.href='/admin/book/doc_add?id='+e.data;
									},1000)												
								}
							}
							tool.post("/admin/book/doc_add", {book_id:book_id,pid:pid,type:data[0].id,title:text}, callback); 								
						})
					}else if(data[0].id==3){
						var content='<div style="padding:0 15px;"><table class="layui-table">\
							<tr>\
								<td class="layui-td-gray">链接标题 <font>*</font></td>\
								<td><input name="title" id="docTitle" class="layui-input" value="" placeholder="请输入标题"></td>\
							</tr>\
							<tr>\
								<td class="layui-td-gray">URL链接 <font>*</font></td>\
								<td><input name="link" id="docLink" class="layui-input" value="" placeholder="请输入链接"></td>\
							</tr>\
						</table></div>';
						layer.open({
							type:1,
							title:'新建链接',
							area:['480px','300px'],
							content:content,
							success:function(){
								
							},
							btn: ['确定提交'],
							btnAlign:'c',
							yes: function(idx){
								let docTitle = $('#docTitle').val();
								let docLink = $('#docLink').val();
								if(docTitle==''){
									layer.msg('请输入标题');
									return;
								}
								if(docLink==''){
									layer.msg('请输入链接');
									return;
								}
								let callback = function (e) {
									layer.closeAll();
									layer.msg(e.msg);
									if(e.code==0){
										setTimeout(function(){							
											window.location.href='/admin/book/doc_add?id='+e.data;
										},1000)												
									}
								}
								tool.post("/admin/book/doc_add", {book_id:book_id,pid:pid,type:data[0].id,title:docTitle,link:docLink}, callback); 			
							}
						})	
					}
				}
				else{
					layer.msg('请选择类型');
					return false;
				}
			}
		})	
	}
   
   
		//监听返回
		$('body').on('click', '[lay-event="back"]', function () {
			window.location.href='/admin/book/view?id='+book_id;
			return false;
		});


		if(type == 1){
			if (editorType == 1) {
				var editor = layui.tinymce;
				var edit = editor.render({
					selector: "#container",
					height: window.innerHeight - 130
				});
				//监听提交
				form.on('submit(webform)', function (data) {
					data.field.content = tinyMCE.editors['container'].getContent();
					if (data.field.content == '') {
						layer.msg('请先完善文章内容');
						return false;
					}
					let callback = function (e) {
						if (e.code == 0) {
							layer.confirm('保存成功,关闭当前页面吗?', { icon: 3, title: '提示' }, function (index) {
								window.location.href='/admin/book/view?id='+book_id;
							});
						} else {
							layer.msg(e.msg);
						}
					}
					tool.post("/admin/book/doc_add", data.field, callback);
					return false;
				});
			}
			else {
				var editor = layui.editormd;
				var edit = editor.render('docContent', {
					markdown: document.getElementById('mdContent').value,
					height: window.innerHeight - 130
				});
				//监听提交
				form.on('submit(webform)', function (data) {
					if (data.field.mdContent == '') {
						layer.msg('请先完善文章内容');
						return false;
					}
					let callback = function (e) {
						if (e.code == 0) {
							layer.confirm('保存成功,关闭当前页面吗?', { icon: 3, title: '提示' }, function (index) {
								window.location.href='/admin/book/view?id='+book_id;
							});
						} else {
							layer.msg(e.msg);
						}
					}
					tool.post("/admin/book/doc_add", data.field, callback);
					return false;
				});
			}
		}
		else{
			//监听提交
			form.on('submit(webform)', function (data) {
				let callback = function (e) {
					if (e.code == 0) {
						layer.confirm('保存成功,关闭当前页面吗?', { icon: 3, title: '提示' }, function (index) {
							window.location.href='/admin/book/view?id='+book_id;
						});
					} else {
						layer.msg(e.msg);
					}
				}
				tool.post("/admin/book/doc_add", data.field, callback);
				return false;
			});
		}	
  }

</script>
{/block}
<!-- /脚本 -->